<template>
  <el-header class="layout-header">
    <el-row class="header-row">
      <el-col :span="6" class="logo-area">
        <router-link to="/" class="logo-text">E Commerce Platform</router-link>
      </el-col>

      <el-col :span="12" v-if="showSearch" class="search-area">
        <div class="search-box">
          <el-icon :size="35" class="search-icon"><Search style="color:#9ca3af" /></el-icon>
          <el-input
            v-model="keyword"
            placeholder="搜索"
            style="width:500px;height:50px;--el-input-focus-border-color:orange;--el-input-border-radius:8px;font-size:18px" />
        </div>
      </el-col>

      <el-col :span="showSearch ? 6 : 18" class="top-right-area">
        <div v-if="isLoggedIn" class="user-info-area">
          <router-link to="/profile">
            <el-icon :size="30" class="top-right-icon"><User /></el-icon>
          </router-link>
          <el-button type="text" @click="logout" class="logout-button">登出</el-button>
        </div>
        <el-icon v-else :size="35" class="top-right-icon" @click="openLoginDialog">
          <User />
        </el-icon>
        <el-badge :value="cartStore.cart.totalQuantity" :hidden="!isLoggedIn || cartStore.cart.totalQuantity === 0" class="cart-badge">
          <el-icon :size="35" class="top-right-icon" @click="openCartDrawer">
            <ShoppingCart />
          </el-icon>
        </el-badge>
        <el-icon :size="35" class="top-right-icon">
          <router-link to="/admin/products"><Coin class="top-right-icon-2"/></router-link>
        </el-icon>
      </el-col>
    </el-row>
  </el-header>

  <login-dialog ref="loginDialogRef" @login-success="handleLoginSuccess"></login-dialog>
  <shopping-cart-drawer v-model:visible="isCartDrawerVisible" @close="isCartDrawerVisible=false" />
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { Search, User, ShoppingCart, Coin } from '@element-plus/icons-vue';
import LoginDialog from './LoginDialog.vue';
import ShoppingCartDrawer from './ShoppingCartDrawer.vue';
import { useUserStore } from '../stores/user';
import { useCartStore } from '../stores/cart';
import { ElMessage } from 'element-plus';

const props = defineProps<{ showSearch?: boolean }>();
const showSearch = computed(() => props.showSearch !== false);

const userStore = useUserStore();
const cartStore = useCartStore();

const loginDialogRef = ref<InstanceType<typeof LoginDialog> | null>(null);
const isCartDrawerVisible = ref(false);

const isLoggedIn = computed(() => userStore.isLoggedIn);
const keyword = ref('');

const openLoginDialog = () => {
  loginDialogRef.value?.openDialog();
};

const logout = () => {
  userStore.clearCredentials();
  cartStore.clearLocalCartState();
  ElMessage.success('您已成功登出');
};

const openCartDrawer = () => {
  if (!isLoggedIn.value) {
    openLoginDialog();
    ElMessage.info('请先登录以查看购物车');
    return;
  }
  cartStore.getCart();
  isCartDrawerVisible.value = true;
};

const handleLoginSuccess = (user: any) => {
  ElMessage.success(`欢迎回来, ${user.name}!`);
  cartStore.getCart();
};
</script>

<style scoped>
.layout-header{
  --el-header-padding: 0;
  height: 70px;
  background-color:#ffffff;
  box-shadow:0 2px 8px rgba(0,0,0,0.1);
}
.header-row{height:100%;margin-left:50px;margin-right:50px;align-items:center;}
.logo-area{display:flex;align-items:center;color:orange;font-size:25px;font-weight:900;}
.search-area{display:flex;align-items:center;justify-content:center;}
.top-right-area{text-align:right;display:flex;align-items:center;justify-content:flex-end;}
.top-right-icon{margin-left:35px;cursor:pointer;color:#333;transition:color 0.3s;}
.top-right-icon:hover{color:orange;}
.top-right-icon-2{color:#213547;}
.top-right-icon-2:hover{color:orange;}
.cart-badge{margin-left:0px;}
.user-info-area{display:flex;align-items:center;}
.logout-button{margin-left:15px;}
.search-icon{margin-right:10px;color:#9ca3af}
.logo-text{text-decoration:none;color:orange;font-size:25px;font-weight:900;}
</style> 